<template>
    <div class="block_main blue-tit">
        <!-- <div class="nytit">首页&gt;通知/督办</div> -->
        <el-row style="padding-top: 10px">
            <el-col :span="24" style="padding:0 5px">
                <el-card>
                    <div class="title">出售商品管理</div>
                    <!-- 筛选 -->

                    <!-- 表格内容组件 -->
                    <div class="block_main blue-tit">
                        <el-table :data="tableData" style="width: 100%" v-loading="loading">
                            <el-table-column type="index" width="70" label="商品ID" fixed></el-table-column>

                            <el-table-column prop="progress" label="商品名称" width="180"></el-table-column>
                            <el-table-column width="160" prop="gname" label="身份码"></el-table-column>
                            <el-table-column prop="company" label="发货地" width="250">
                                <template slot-scope="scope">
                                    <div style="text-align:left;">{{scope.row.company}}</div>
                                </template>
                            </el-table-column>

                            <el-table-column width="120" prop="gname" label="类型"></el-table-column>
                            <el-table-column width="120" prop="gname" label="品牌"></el-table-column>
                            <el-table-column width="120" prop="gname" label="燃料种类"></el-table-column>
                            <el-table-column width="120" prop="gname" label="介质类型"></el-table-column>
                            <el-table-column width="120" prop="gname" label="吨位"></el-table-column>
                            <el-table-column width="120" prop="gname" label="状态"></el-table-column>
                            <el-table-column width="120" prop="gname" label="发布日期"></el-table-column>
                            <el-table-column width="120" prop="gname" label="操作">
                                <template slot-scope="scope">
                                    <a @click="downGoods">下架</a>/
                                    <a>通过</a>/
                                    <a>删除</a>
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                    <!-- 表格内容组件 end-->
                    <!-- 翻页 -->
                    <div class="zpage">
                        <el-pagination
                            background
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            :current-page.sync="currentPage"
                            :page-size.sync="pagesize"
                            layout="total, prev, pager, next, jumper"
                            :total.sync="pagetotal"
                        ></el-pagination>
                    </div>
                    <!-- 翻页 end -->
                </el-card>
            </el-col>
        </el-row>
    </div>
</template>
<script>
import actionurl from "@/assets/js/actionurl";


import config from "../../config";

export default {
    name: "tableChart",
    components: {
     
     
    },
    props: {
        chartOptions: Object,
        chartData: Object
    },
    data() {
        return {
           
        };
    },
    methods: {
        downGoods() {
            this.$confirm("此操作将永久删下架该商品, 是否继续?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            })
                .then(() => {
                    this.$message({
                        type: "success",
                        message: "删除成功!"
                    });
                })
                .catch(() => {
                    this.$message({
                        type: "info",
                        message: "已取消删除"
                    });
                });
        },
        
    },
    created() {
        
    },
    mounted() {
        
    }
};
</script>
<style scoped lang="scss">
.persent {
    width: 80%;
    height: 10px;

    display: flex;
    justify-content: space-between;
    position: relative;
    padding-right: 40px;

    span {
        background: #ccc;
        width: 100%;
        line-height: 10px;

        b {
            background: green;
            width: 100%;
            height: 100%;
            display: inline-block;
            float: left;
        }
    }

    em {
        line-height: 10px;
        position: absolute;
        right: 0;
    }
}
.demo-table-expand {
    font-size: 0;
}
.demo-table-expand label {
    width: 90px;
    color: #99a9bf;
}
.demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 90%;
}

.layerup {
    h2 {
        font-size: 18px;
        font-weight: normal;
        text-align: center;
        margin-bottom: 15px;
    }
    span {
        width: 46%;
        line-height: 20px;
    }
    p {
        display: flex;
        justify-content: space-between;
        color: #999;
        margin-bottom: 10px;
    }
    hr {
        border: 1px solid #f5f5f5;
        margin-top: 15px;
    }
}
.titlehover {
    cursor: pointer;
    &:hover {
        color: #1d82d2;
    }
}
</style>
